<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
    <nz-tab [nzTitle]="'账户密码登录'">
      <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
            <input nz-input formControlName="userName" placeholder="请输入用户名 :jeecg">
          </nz-input-group>
          <nz-form-explain *ngIf="userName.dirty && userName.errors">
            请输入用户名!
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock">
            <input nz-input type="password" formControlName="password" placeholder="请输入密码 :123456">
          </nz-input-group>
          <nz-form-explain *ngIf="password.dirty && password.errors">
            请输入密码!
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="false">
        <nz-form-control>
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock" nz-row="6">
                <input nz-input  formControlName="randCode" placeholder="请输入验证码">
              </nz-input-group>
              <nz-form-explain *ngIf="randCode.dirty && randCode.errors">
                请输入验证码！
              </nz-form-explain>
            </nz-col>
            <nz-col [nzSpan]="8">
              <div style="float:right">
              <img alt="example" (click)="refresh()" [src]="checkCode" />
            </div>
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
    <nz-tab [nzTitle]="'手机号登录'">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
            <input nz-input formControlName="mobile" placeholder="mobile number">
          </nz-input-group>
          <nz-form-explain *ngIf="mobile.dirty && mobile.errors">
            <ng-container *ngIf="mobile.errors.required">
              请输入手机号！
            </ng-container>
            <ng-container *ngIf="mobile.errors.pattern">
              手机号格式错误！
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-row [nzGutter]="8">
            <nz-col [nzSpan]="16">
              <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-mail">
                <input nz-input formControlName="captcha" placeholder="captcha">
              </nz-input-group>
              <nz-form-explain *ngIf="captcha.dirty && captcha.errors">
                请输入验证码！
              </nz-form-explain>
            </nz-col>
            <nz-col [nzSpan]="8">
              <button type="button" nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count" nzBlock
                [nzLoading]="http.loading">
                {{ count ? count + 's' : '获取验证码'}}
              </button>
            </nz-col>
          </nz-row>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
  </nz-tabset>
  <nz-form-item>
    <nz-col [nzSpan]="12">
      <label nz-checkbox formControlName="remember">自动登录</label>
    </nz-col>
    <nz-col [nzSpan]="12" class="text-right">
      <a class="forgot" (click)="msg.error('请找欧阳锋')">忘记密码</a>
    </nz-col>
  </nz-form-item>
  <nz-form-item>
    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="http.loading" nzBlock>
      登录
    </button>
  </nz-form-item>
</form>
<div class="other">
  <!--  其他登录方式
  <i nz-tooltip="in fact Auth0 via window" (click)="open('auth0', 'window')" nz-icon type="alipay-circle" class="icon"></i>
  <i nz-tooltip="in fact Github via redirect" (click)="open('github')" nz-icon type="taobao-circle" class="icon"></i>
  <i (click)="open('weibo', 'window')" nz-icon type="weibo-circle" class="icon"></i> -->
  <a class="register" routerLink="/passport/register">注册账户</a>
</div>
